<template>
    <div>
        <!-- 头部 -->
        <div class="top_tab1">
            <div class="left1" @click="back()">
                <img  src="../assets/order_center/shangs.png">
            </div>
            <span>物流信息</span>
            <div class="right1">
            </div>
        </div>
        <div class="n"></div>
        <!-- 主体部分 -->
        <div class="logistab">
            <div class="logisimg">
                <img src="../assets/product/mes01.png" alt="">
            </div>
            <div class="logisright">
                <div>百世快递</div>
                <div>运单号：721080802531703</div>
                <div>官方电话 95320</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: "logistics",
  data() {
    return {};
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    }
  }
};
</script>
<style>
.top_tab1 {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
}
.top_tab1 span {
  color: #333;
  font-size: 0.36rem;
  padding-left: 0.8rem;
}
.top_tab1 .right1 {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab1 img {
  width: 0.43rem;
}
.n {
  height: 0.93rem;
}
.logistab {
  width: 90%;
  height: 2.2rem;
  background: #fff;
  border-radius: 0.2rem;
  margin: 0.3rem auto 0;
  display: flex;
  padding: 0.3rem 0.1rem;
}
.logisimg {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  overflow: hidden;
  margin: auto 0.3rem;
}
.logisimg img {
  width: 100%;
  height: 100%;
}
.logisright {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.3rem;
  color: #333;
  margin-left: 0.3rem;
}
</style>

